<template>
            <!-- 搜索 -->
            <el-form :model="model" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <!-- 暴露组件使用插槽 -->
                <slot/>
                <template v-if="showSearch">
                    <slot name="show"/>
                </template>

            <el-col :span="8" :offset="showSearch ? 0 : 8">
                <div class="flex items-center justify-end">
                    <!-- $emit('search')告诉父组件在哪里传递数据 -->
                <el-button type="primary" @click="$emit('search')">搜索</el-button>
                <el-button @click="$emit('reset')">重置</el-button>
                <el-button type="primary" text @click="showSearch = !showSearch"
                v-if="hasShowSearch">
                    {{showSearch ? "收起":"展开" }}
                    <el-icon>
                        <ArrowUp v-if="showSearch" />
                        <ArrowDown  v-else/>
                    </el-icon>
                </el-button>
                
                </div>
            </el-col>
            </el-row>
        </el-form>
</template>

<script setup>
// useSlots 获取插槽中相关信息
import {ref , useSlots} from "vue"
defineExpose({
    model:Object
})
//子组件不能直接执行父组件的方法，但是可以把子组件需要的方法进行匿名抛出
defineEmits("search","reset")
const showSearch = ref(false)
const slots = useSlots()
//!!slots.show：（有值就一定为true）强行转化为boolean值
const hasShowSearch = ref(!!slots.show)
</script>